<script lang="ts">
import type { TColumn } from '~comp/table';
import type { TPresetBreakpoints } from '~/composables/useElementBreakpoint';

function useTableList(bp: Ref<TPresetBreakpoints>) {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiFundDepositRecord, { });
  const listData = computed(() => listQry?.data?.value?.list ?? []);

  const tableBp = computed(() => ({
    s1: bp.value.ltxl,
    s2: bp.value.xl && bp.value.lt4xl,
    s3: bp.value['4xl'],
  }));

  const tableColumn = computed(() => {
    const bp = tableBp.value;
    const columns: TColumn[] = [
      { key: 'time', name: '' },
      { key: 'order_no', name: $t('okfNtv6qfwQxUwZBLaGs'), show: bp.s3 },
      { key: 'from_address', name: $t('seyKlXooggVhjIx5U8hT'), show: bp.s3 },
      { key: 'coin', name: $t('uIkputJyPtyBCeeSwh2ig'), show: bp.s3 },
      { key: 'deposit_status', name: $t('iVbyu9coD6Nmg1aJ4Ufug'), show: bp.s3 },
      { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), thClass: 'text-right', tdClass: 'text-right' },
    ];
    return columns;
  });

  return {
    listData,
    listQry,
    listParams,
    tableColumn,
    tableBp,
  };
}
</script>

<script setup lang="ts">
const [setEle, eleBp] = useElementBreakpoint({});
const { listQry, listData, listParams, tableColumn, tableBp } = useTableList(eleBp);
const displayUtc = ref(true);
function getType(id: number) {
  return [
    { key: 1, name: $t('zsaLk1KtXyRrJmdsq5Jo2'), color: 'text-green-500' },
    { key: 2, name: $t('kMyiFSeP5EaTmh4vSEeYq'), color: 'text-brand-500' },
    { key: 3, name: $t('on2Aa7w7Ig1VgfsAvaxUc'), color: 'text-yellow700' },
    { key: 4, name: $t('hdjtIoNyLd9TcQn3V1Mim'), color: 'text-yellow700' },
    { key: 5, name: $t('pFexkGv2pL4Nl4GmT9ZZm'), color: 'text-slate500' },
  ].filter(i => i.key === id)[0];
}
</script>

<template>
  <div>
    <div :ref="setEle">
      <!-- PC端 -->
      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" errorClass="min-h-40" outRender>
        <TTable indexId="uid" :columns="tableColumn" :data="listData">
          <template #time-th>
            <TDateFormatTh v-model:utc="displayUtc" />
          </template>

          <template #time-td="{ row }">
            <div>
              {{ $d(row?.create_time, displayUtc ? 'full-utc' : 'full') }}
            </div>
            <div v-if="!tableBp.s3" class="flex items-center text-sys-text-body">
              No: {{ row?.order_no.slice(-12.0) }} <TCopy class="size-8 rounded-2" :source="row.order_no" />
            </div>
            <div v-if="!tableBp.s3" class="flex items-center text-sys-text-body">
              From：{{ desensitize(row.from_address, 6) }}
              <TCopy v-if="!!row.from_address" :source="row.from_address" class="size-8 rounded-2" />
              <div v-else>
                -
              </div>
            </div>
          </template>

          <template #order_no-td="{ row }">
            <div v-if="!!row.order_no" class="flex items-center text-sys-text-body">
              <ATooltip>
                <template #title>
                  {{ row.order_no }}
                </template>
                {{ row?.order_no.slice(-12.0) }}
              </ATooltip>
              <TCopy class="size-8 rounded-2" :source="row.order_no" />
            </div>
            <div v-else class="text-sys-text-body">
              -
            </div>
          </template>

          <template #from_address-td="{ row }">
            <div v-if="!!row.from_address" class="flex items-center text-sys-text-body">
              <ATooltip>
                <template #title>
                  {{ row.from_address }}
                </template>
                {{ desensitize(row.from_address, 6) }}
              </ATooltip>
              <TCopy class="size-8 rounded-2" :source="row.from_address" />
            </div>
            <div v-else class="text-sys-text-body">
              -
            </div>
          </template>

          <template #coin-td="{ row }">
            <div class="text-sys-text-body">
              <div v-if="row.chain">
                {{ row.chain }} <span v-if="row.network">{{ `(${row.network})` }}</span>
              </div>
              <div v-else>
                {{ row.currency.currency }}
              </div>
            </div>
          </template>
          <template #deposit_status-td="{ row }">
            <div class="text-sys-text-body" :class="getType(row.status)?.color">
              {{ getType(row.status)?.name || '-' }}
            </div>
          </template>

          <template #amount-td="{ row }">
            <div v-if="!tableBp.s3" class="h-8 text-sys-text-body leading-8">
              <div v-if="row.chain">
                {{ row.chain }} <span v-if="row.network">{{ `(${row.network})` }}</span>
              </div>
              <div v-else>
                {{ row.currency.currency }}
              </div>
            </div>
            <div v-if="!tableBp.s3" class="text-sys-text-body" :class="getType(row.status)?.color">
              {{ getType(row.status)?.name || '-' }}
            </div>
            <TAmount
              :value="row?.amount" :symbol="row?.currency?.currency || row?.currency" format="pad-dec" colored="pos"
              class="h-8 leading-8"
            />
          </template>
        </TTable>

        <template #pending>
          <div v-if="eleBp.lt4xl">
            <TSkeleton v-for="i in 3" :key="i" class="grid grid-cols-2 mb-5 w-full gap-2">
              <TSkeleton type="rect" height="20px" width="120px" class="col-span-full" />
              <TSkeleton
                v-for="k in 4"
                :key="k"
                type="rect"
                height="20px"
              />
            </TSkeleton>
          </div>
          <TTableLoading v-if="eleBp['4xl']" />
        </template>
      </TSuspenseView>
    </div>

    <TPagination
      v-model:page="listParams.page" v-model:pageSize="listParams.page_size" :querier="listQry"
      class="mt-2"
    />
  </div>
</template>
